<!-- 物料清单 -->
<template>
  <div class="billOfMaterials">
    <div class="billOfMaterials-header">
      <div class="billOfMaterials-header-btn">
        <!-- <el-button size="mini">领料出库</el-button>
        <el-button size="mini">退料入库</el-button>
        <el-button size="mini">导出</el-button> -->
      </div>
      <div class="billOfMaterials-header-info">
        <div class="billOfMaterials-header-info-item">
          <span>需求总量：</span>
          <span>{{ data.quantityScheduledTotal }}</span>
        </div>
        <div class="billOfMaterials-header-info-item">
          <span>领用总量：</span>
          <span>{{ data.quantityIssuedTotal }}</span>
        </div>
        <div class="billOfMaterials-header-info-item">
          <span>退料总量：</span>
          <span>{{ data.quantityRtTotal }}</span>
        </div>
      </div>
    </div>
    <div class="billOfMaterials-main">
      <el-table :data="data.mdProductBomVOList" size="small" border style="width: 100%" height="300px">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bomItemCode" label="物料编码"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bomItemName" label="物料名称"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bomItemSpec" label="规格型号"></el-table-column>
        <el-table-column show-overflow-tooltip prop="unitOfMeasure" label="单位" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="quantityScheduled" label="需求数量" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="quantity" label="用料比例" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="quantityIssued" label="领用数量" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="quantityRt" label="退料数量" width="180"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getListItemsOrder, } from "@/api/mes/pro/workorder";
export default {
  name: 'BillOfMaterials',
  props: {
    data: undefined 
  },
  data() {
    return {
      tableData: [],
      total: 0,
      totalAmountReceived: 0,
      totalAmountOfReturnedMaterials: 0,
    }
  },
  mounted() {
    this.getList()    
  },
  methods: {
    getList(){
      getListItemsOrder().then(res => {
        this.tableData = res.data;
        this.total = res.data.length;
        console.log('###',res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.billOfMaterials {
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    // padding: 0 20px;
    &-btn {
      display: flex;
    }
    &-info {
      display: flex;
      justify-content: space-between;
      &-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>